CSS usage in Content Studio

CSS (Cascading Style Sheets) is a standard to describe the visual format for HTML and XHTML documents. There are other style sheet standards, but CSS is the dominating standard for website pages. CSS can control all aspects of web page layout, including fonts, colors, positions, sizes and flow, on both separate elements and whole pages. Actions connected to interactive events (mouse movements etc.) can also be defined in CSS. Modern webbrowsers are all the time getting better CSS support, which enables even more application areas.

CSS specifications can be added on specific objects (inline in the code directives) and for whole pages. The most powerful mechanism is to create an external style sheet to be used for the whole website. With an external style sheet, it becomes very easy to alter the design for the whole website without the need of altering all web pages manually. This also eliminates many problems with web pages that have design inconsistencies.

CSS and Content Studio

All CSS shipped with Content Studio are placed in the folder System/Style sheet. When you develop the website it’s your choice where you want to keep your CSS but the folder System/Style sheet is the recommended folder. In the site settings for CS you can specify the main CSS for your website (Properties->Settings->System.IE_Style). If you don’t want to use a default CSS that is possible but CS implements the default CSS in a special way that gives you some special features.

All rules that are defined in the default website or that are linked in to that style sheet will be accessible in all contexts used by editors and developers. CS adds the default CSS to all content even when you are previewing content without metadata. You can extend the default stylesheet by including the @import directive in the default stylesheet as the code sample below shows.

Code example A: Import a style sheet from another style sheet. Note that import statements must be the first statements in the CSS code

@import url(”mystylesheet.css”);

The category “Stylesheets” in the System unit contains globally available style sheets (CSS definitions). They all rely on the “Protected/Standard….CSS” style sheet.